<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="书籍名称">
    <el-input v-model="form.bookname"></el-input>
  </el-form-item>
  <el-form-item label="作者">
    <el-input v-model="form.author"></el-input>
  </el-form-item>
  <el-form-item label="出版社">
    <el-input v-model="form.publisher"></el-input>
  </el-form-item>
  <el-form-item label="书籍类型">
  <el-select v-model="form.booktype" placeholder="请选择书籍类型">
    <el-option
      v-for="(value, index) in booktypelist"
      :key="index"
      :label="value.tname"
      :value="value.tid"
    ></el-option>
  </el-select>
</el-form-item>
  <el-form-item label="数量" style="width: 200px;">
    <el-input v-model="form.remain"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">立即添加</el-button>
    <el-button @click="resetForm(form)">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        booktypelist:[],
        form: {
          bookname: '',
          publisher: '',
          author: '',
          remain: 0,
          booktype: ''
        }
      }
    },
    methods: {
      submitForm() { 
        console.log(this.form)
        axios.post("http://localhost:8088/books/insert",this.form).then(Result=>{
          console.log(Result)
          if(Result.data=="success"){alert("添加成功");this.$router.push("/one")}else{
            alert("添加失败")
          }
        })
      },
      resetForm(form) {
        this.$refs[form].resetFields();
      }
    },
    created(){
      axios.get("http://localhost:8088/books/bookType").then(res => {
        console.log(res)
        this.booktypelist=res.data;
      })
    }
  }
</script>

<style>

</style>